<template>
  <div class="about">
    <h1>{{this.$store.state.name}}</h1>
    <h1>{{name}}</h1>
    <h1>大写:{{this.$store.getters.upperCaseName}}</h1>
    <h1>大写(mapGetters):{{upperCaseName}}</h1>
    <hr />
    <h2 style="color: orange;">{{count}}</h2>
    <button @click="editNameA('lisi')">修改name(mapActions)</button>
    <button @click="editNameM('wangwu')">修改name(mapMutations)</button>
  </div>
</template>
<script>
  import {
    mapState,
    mapGetters,
    mapActions,
    mapMutations
  } from 'vuex'
  export default {
    computed: {
      /* name() {
        return this.$store.state.name
      } */
      // ...mapState({name:'name'}),
      ...mapState('aboutOption', ['name']),
      ...mapState('homeOption', ['count']),
      /* upperCaseName(){
        return this.$store.getters.upperCaseName
      } */
      ...mapGetters('aboutOption', ['upperCaseName'])
    },
    methods: {
      // editName(){
      // this.$store.dispatch("editNameA","lisi")
      // this.$store.commit("editNameM","wangwu")
      // }
      ...mapActions('aboutOption', ['editNameA']),
      ...mapMutations('aboutOption', ['editNameM'])
    }
  }
</script>
